<template>
  <view class="safe-area-inset-bottom">
    <view class="swip_header">
      <view class="slot-box">
        <view style="width: 100%;">
          <uni-search-bar
              v-model="queryParams.params.findApi"
              type="text"
              @confirm="handleQuery"
              @input="handleQuery"
              placeholder="请输入开票订单号/发票抬头"/>
        </view>
      </view>
    </view>

    <view class="listSearchTop cardList" v-if="invoiceOrderList != ''">
      <uni-card :is-shadow="false" v-for="(item,index) in invoiceOrderList" :key="index" @click="detail(item)">
        <p class="grid-integral">开票订单号：{{ item.number }}</p>
        <p class="grid-integral">发票抬头：{{ item.title }}</p>
        <p class="grid-integral">开票类型：
          <template v-for="(dictItem, index) in dicts.ec_invoice_type">
            <template v-if="item.type == dictItem.value">
              <span>{{ dictItem.text }}</span>
            </template>
          </template>
        </p>
        <p class="grid-integral">开票金额：{{ item.amount }}元</p>
        <p class="grid-integral">申请时间：{{ item.createTime }}</p>
        <p class="grid-integral">申请人：{{ item.createName }}</p>
        <p class="grid-integral">开票时间：
          <span v-if="!!item.completeTime">{{ item.completeTime }}</span>
          <span v-else>--</span></p>
        <view slot="actions" class="card-actions">
          <view>开票状态：
            <template v-for="(dictItem, index) in dicts.ec_invoice_order_status">
              <template v-if="item.status == dictItem.value">
                <uni-tag :text="dictItem.text" :type="dictItem.type"/>
              </template>
            </template>
          </view>
          <view class="flex_between">
            <view class="card-actions-item" @click.stop="handleRevoke(item)" v-if="item.status == 2">
              <text class="card-actions-item-text warningColor">撤销</text>
            </view>
            <view
                v-if="item.status == 3 || item.status == 0"
                class="card-actions-item"
                @click.stop="handleDelete(item)">
              <text class="card-actions-item-text errorColor">删除</text>
            </view>
          </view>
        </view>
      </uni-card>
      <!-- 加载更多 -->
      <uni-load-more color="#00a660" :status="loadStatus"/>
    </view>

    <!-- 暂无数据 -->
    <luanqingEmpty :show="true" text="没有更多数据啦" v-else/>
  </view>
</template>

<script>
import {getDictsByNameForUni} from "@/utils/dicts";
import {delInvoiceOrder, listInvoiceOrder, revokeInvoiceOrder} from "@/api/ec/console/fee/invoiceOrder";
import luanqingEmpty from '@/components/luanqing-empty/luanqing-empty';

export default {
  components: {luanqingEmpty},
  data() {
    return {
      dicts: {
        ec_invoice_order_status: [],
        ec_invoice_type: [],
      },
      total: 0, //总条数
      loadStatus: 'loading', //是否加载中 //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
      invoiceOrderList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        params: {
          findApi: undefined
        }
      },
    }
  },
  onLoad() {
    this.getDicts()
    this.bindingRefreshData();
  },
  onUnload() {
    this.unbindingRefreshData();
  },
  created() {
    this.getList();
  },
  /** 上拉刷新回调 */
  onReachBottom() {
    if (this.loadStatus != 'noMore' && this.total > this.invoiceOrderList.length) {
      this.loadStatus = 'loading';
      // 延迟500毫秒显示loading效果
      setTimeout(() => {
        // 执行查询的方法 false触底加载
        this.getList(false)
      }, 500)
    } else {
      // 停止加载
      this.loadStatus = 'noMore'
    }
  },
  methods: {
    /** 绑定 */
    bindingRefreshData() {
      // 刷新页面数据
      uni.$on('refreshInvoicesManageIndex', () => {
        this.handleQuery();
      });
    },
    /** 解除绑定 */
    unbindingRefreshData() {
      uni.$off('refreshInvoicesManageIndex');
    },
    /**加载数据字典*/
    getDicts() {
      // 签署套餐有效期
      this.dicts.ec_invoice_order_status = getDictsByNameForUni("ec_invoice_order_status");
      this.dicts.ec_invoice_type = getDictsByNameForUni("ec_invoice_type");
    },
    /** 查询列表 */
    getList(reload) {
      if (reload) {
        this.queryParams.pageNum = 1;
        this.loadStatus = 'more'
        this.$modal.loading();
      }
      listInvoiceOrder(this.queryParams).then(response => {
        if (reload) {
          uni.hideLoading()
        }
        this.total = response.total;
        if (response.total > 0) {
          const dataRows = response.rows;
          this.invoiceOrderList = reload ? dataRows : this.invoiceOrderList.concat(dataRows);
        } else {
          this.invoiceOrderList = [];
        }
        // 判断数据是否加载完全
        if (response.total <= this.invoiceOrderList.length) {
          this.loadStatus = 'noMore'
        }
        // 页数+1
        this.queryParams.pageNum++
      }).catch(() => {
        if (reload) {
          uni.hideLoading()
        }
      });
    },
    /** 撤销 */
    handleRevoke(item) {
      let that = this
      uni.showModal({
        title: '系统提示',
        content: '您确认要撤销开票申请吗？撤销开票后将系统将不在为您开具发票，您亦可重新申请开票。',
        confirmColor: '#00a660',
        success: function (res) {
          if (res.confirm) {
            let data = {id: item.id};
            revokeInvoiceOrder(data).then(() => {
              that.getList(true);
              that.$modal.msgSuccess("撤销开票成功");
            });
          } else {
          }
        }
      })
    },
    /** 删除 */
    handleDelete(item) {
      let that = this
      uni.showModal({
        title: '系统提示',
        content: '您确认要删除开票申请吗？删除后将无法恢复。',
        confirmColor: '#00a660',
        success: function (res) {
          if (res.confirm) {
            delInvoiceOrder(item.id).then(() => {
              that.getList(true);
              that.$modal.msgSuccess("删除成功");
            });
          } else {
          }
        }
      })
    },
    /** 查看详情 */
    detail(item) {
      // uni.navigateTo({url: './detail?id=' + item.id})
      uni.navigateTo({url: './detail?dataDetails=' + JSON.stringify(item)});
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList(true);
    },
  }
}
</script>

<style scoped lang="scss">
page {
  background: $uni-bg-color-grey;
}
</style>
